<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '优惠卷',
    navigationBarRightButton: {
      hide: true,
    },
  },
}
</route>
<template>
  <view
    class="w-full h-full bg-white overflow-hidden box-border"
    :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
  >
    <view class="w-full h-full home-container">
      <wd-navbar @click-left="handleClickLeft">
        <template #title>
          <text class="text-gray-333 font-size-36 font-500">优惠卷</text>
        </template>
        <template #left>
          <wd-icon
            name="chevron-left"
            class="text-gray-333 font-size-44"
            @click="pagesBack"
          ></wd-icon>
        </template>
      </wd-navbar>
      <view class="w-full h-full p-x-28 p-y-32 home-content">
        <view class="w-full">
          <wd-tabs v-model="tabVaslue" swipeable @change="tabChange">
            <block v-for="item in tabHeader" :key="item">
              <wd-tab :title="item.title">
                <view class="w-full overflow-auto tab-con-height">
                  <view
                    class="w-full hr-236 pos-relative z-1 mg-t-32"
                    :class="{ 'coupon-use': tabVaslue === 1 }"
                    v-for="(item, index) in dataList"
                    :key="index"
                  >
                    <view class="pos-absolute pos-top-0 pos-left-0 w-full h-full z-0">
                      <image
                        width="100%"
                        height="100%"
                        :src="'../../static/images/background/coupon-bg.png'"
                      />
                    </view>
                    <view class="pos-relative z-1 p-x-28 p-y-28">
                      <view class="flex justify-between items-center">
                        <view
                          class="flex justify-start items-end text-blue-1 font-600 line-height-none"
                        >
                          <view class="font-size-28 mg-b-6 mg-r-6">¥</view>
                          <view class="font-size-64">{{ item.min_buy_amount }}</view>
                        </view>
                        <view class="wr-180 hr-70">
                          <wd-button type="primary" size="small">
                            <text class="font-size-32 text-white font-500">去使用</text>
                          </wd-button>
                        </view>
                      </view>
                      <view class="mg-t-6 p-x-5">
                        <text class="font-size-28 text-gray-333 font-500">{{ item.type }}</text>
                      </view>
                      <view class="mg-t-26">
                        <text class="font-size-24 text-gray-999 font-400">
                          使用期限：{{ item.expire_at }}
                        </text>
                      </view>
                    </view>
                  </view>
                </view>
              </wd-tab>
            </block>
          </wd-tabs>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getMyCoupons } from '@/service/my/my'

defineOptions({
  name: 'Coupon',
})
const { safeAreaInsets } = uni.getSystemInfoSync()
const couponBg = '../../static/images/background/coupon-bg.png'
const handleClickLeft = () => {}
const pagesBack = () => {
  uni.switchTab({
    url: '/pages/home/person',
  })
}
const tabVaslue = ref(0)
const tabHeader = ref([{ title: '未使用' }, { title: '已使用' }, { title: '已失效' }])
const tabContentList = ref([])
onLoad(() => {})
onShow(() => {
  getData()
})
const dataList: any = ref([])
const getData = () => {
  const data: any = {
    status: tabVaslue.value,
  }
  getMyCoupons(data).then((res: any) => {
    const data: any = res.data
    if (data) {
      dataList.value = data.data
    }
  })
}
const tabChange = (ev: any) => {
  dataList.value = []
  const index = ev.index
  tabVaslue.value = index
  let title = ''
  if (index === 0) {
    title = '未使用'
  } else if (index === 1) {
    title = '已使用'
  } else {
    title = '已失效'
  }
  // tabContentList.value = dataList.value.filter((item: any) => item.status === tabVaslue.value)
  getData()
}
</script>

<style scoped lang="scss">
.home-container {
  position: relative;
  z-index: 1;
}
.home-content {
  height: calc(100% - var(--wot-navbar-height, 88rpx));
  overflow: auto;
}
.tab-con-height {
  height: calc(100vh - 256rpx);
}
.coupon-use {
  filter: grayscale(100%);
}
::v-deep .wd-button {
  width: 100% !important;
  height: 100% !important;
}
::v-deep .wd-tabs__nav-item {
  height: 58rpx !important;
  font-size: 32rpx !important;
  line-height: 38rpx !important;
  color: #312f2a !important;
}
::v-deep .wd-tabs__nav {
  height: 58rpx !important;
}
</style>
